<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02.操作样式</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button onclick="handlerAddClass()">添加类样式</button>
    <button onclick="handlerAddStyle()">添加行内样式</button>
    <div id="divNode" >xxxx</div>
    <!-- ="padding: 0 20px;background-color: yellow;font-size: 30px;" -->
    <span id="spanNode" style="font-weight: bold;">添加样式</span>

    <script>
        function handlerAddClass() {
            // class 对应的属性是 className
            divNode.className = "box"

            // divNode.setAttribute("class","box")
        }

        function handlerAddStyle() {
            // spanNode.style = "padding: 0 20px;background-color: yellow;font-size: 30px;"
            console.dir(spanNode.style);
            spanNode.style.padding = "0 20px";
            spanNode.style.backgroundColor = "yellow";
            spanNode.style.fontSize = "30px"
        }
    </script>
    
</body>
</html>